<style scoped>
.title{
  height:30px;
  line-height:30px;
  font-size:14px;
  color:#1AC0ED;
}

.hr{
  width:100%;
  height:1px;
  margin:10px 0px;
  background-color: #FFF;
  opacity: 0.3;
}
</style>
<template>
  <div>
      <div class="title">折线图设置</div>
      <div class="hr"></div>
      <div class="title">线条特定样式设置</div>
      <xradio
        label="折线转为平滑曲线曲线"
        :options="[{label:'是',value:true},{label:'否',value:false}]"
        v-model="editConfig.smooth"
      />
      <colorpicker
        label="线条颜色"
        v-model="editConfig.lineStyle.color"
        def="#B55A55"
      />
      <slider
        label="线条宽度"
        :max="20"
        v-model="editConfig.lineStyle.width"
        :def="2"
      />
      <xradio
        label="线的类型"
        :options="[{label:'实线',value:'solid'},{label:'点状线',value:'dotted'},{label:'虚线',value:'dashed'}]"
        v-model="editConfig.lineStyle.type"
      />

      <div class="hr"></div>
      <div class="title">数据项标签</div>

      <xradio
        label="数据项标签是否显示"
        :options="[{label:'是',value:true},{label:'否',value:false}]"
        v-model="editConfig.label.show"
      />
      <xradio
        label="数据项标签位置"
        :options="[{label:'居上',value:'top'},{label:'居下',value:'bottom'},{label:'居左',value:'left'},{label:'居右',value:'right'},{label:'内部',value:'inside'}]"
        v-model="editConfig.label.position"
      />
      <slider
        label="字体大小"
        :max="48"
        v-model="editConfig.label.fontSize"
      />
      <xradio
        label="字体样式"
        :options="[{label:'普通',value:'normal'},{label:'倾斜文字',value:'oblique'},{label:'斜体',value:'italic'}]"
        v-model="editConfig.label.fontStyle"
      />
      <xradio
        label="字体粗细"
        :options="[{label:'普通',value:'normal'},{label:'加粗',value:'bold'},{label:'更粗',value:'bolder'},{label:'更细',value:'lighter'}]"
        v-model="editConfig.label.fontWeight"
      />
      <div class="hr"></div>
      <div class="title">小标志设置</div>

      <xradio
        label="小标志图形"
        :options="[{label:'无',value:'none'},{label:'圆形',value:'circle'},{label:'矩形',value:'rect'},{label:'圆角矩形',value:'roundRect'},{label:'三角形',value:'triangle'},{label:'菱形',value:'diamond'},{label:'箭头',value:'arrow'}]"
        v-model='editConfig.symbol'
      />
      <slider
        label="小标志大小"
        :max="30"
        v-model='editConfig.symbolSize'
      />
      <slider
        label="小标志图形旋转角度"
        :min="-180"
        :max="180"
        unit="°"
        v-model='editConfig.symbolRotate'
      />
  </div>

</template>
<script>

import xradio from '@/components/xradio'
import colorpicker from '@/components/colorpicker'
import slider from '@/components/slider'
import lodash from 'lodash'

export default {
  name: 'lineconfig',
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    xradio,
    colorpicker,
    slider
  },
  data () {
    return {
      editConfig: {
        type: 'line',
        smooth: null,
        lineStyle: {
          type: null,
          color: null,
          width: null
        },
        label: {
          show: null,
          position: null,
          fontSize: null,
          fontStyle: null,
          fontWeight: null
        },
        symbol: null,
        symbolSize: null,
        symbolRotate: null
      }
    }
  },
  watch: {
    value: {
      handler () {
        lodash.merge(this.editConfig, this.value)
      },
      deep: true
    },
    editConfig: {
      handler (val) {
        console.log('series line config change', val)
        this.$emit('input', val)
      },
      deep: true
    }
  }
}
</script>
